import { Outlet, useLocation, useNavigate } from "react-router-dom";
import styles from "./Functions.module.css";
import { Menu, MenuProps, Spin } from "antd";
import { Suspense, useEffect, useState } from "react";
import Timer from "./children/Timer/Timer";
import Collections from "./children/Collections/Collections";
import React from "react";
import {
  BulbOutlined,
  CalendarOutlined,
  ClockCircleOutlined,
  LeftOutlined,
  MediumOutlined,
  SettingOutlined,
  ToTopOutlined,
} from "@ant-design/icons";

// import { QrCode } from "./children/QrCode/QrCode";
import { Codex } from "./children/Codex/Codex";
import { useHotKey } from "../../utils/utils/shortcut";
import Upload from "./children/Upload/Upload";
import { Inject } from "./children/Inject/Inject";
// import { Password } from "./children/Password/Password";
import Tools from "./children/Tools/Tools";

export const LazyClipboard = React.lazy(
  () => import("./children/Clipboard/Clipboard")
);

const xFunctions = {
  collections: <Collections />,
  inject: <Inject />,
  clipboard: (
    <Suspense fallback={<Spin />}>
      <LazyClipboard />
    </Suspense>
  ),
  timer: <Timer />,
  tools: <Tools />,
  codex: <Codex />,
  // qrCode: <QrCode />,
  upload: <Upload />,
};

export default function () {
  const to = useNavigate();
  const hotKey = useHotKey("p");
  // const store = useAppSelector((state) => state.device);
  useEffect(() => {
    hotKey && to("/");
  }, [hotKey]);

  type MenuItem = Required<MenuProps>["items"][number];

  const items: MenuItem[] = [
    {
      label: "Collections",
      key: "collections",
      icon: <BulbOutlined />,
    },
    {
      label: "Clipboard",
      key: "clipboard",
      icon: <CalendarOutlined />,
    },
    {
      label: "Timer",
      key: "timer",
      icon: <ClockCircleOutlined />,
    },
    {
      label: "Upload",
      key: "upload",
      icon: <ToTopOutlined />,
    },
    {
      label: "Tools",
      key: "tools",
      icon: <SettingOutlined />,
    },
    {
      label: "Music",
      key: "music",
      icon: <MediumOutlined />,
    },
  ];

  type KeyofXfunctions = keyof typeof xFunctions;

  const [current, setCurrent] = useState<KeyofXfunctions>("collections");

  const onClick: MenuProps["onClick"] = (e) => {
    if (Object.keys(xFunctions).indexOf(e.key) > -1) {
      setCurrent(e.key as KeyofXfunctions);
      to(e.key);
    } else {
      console.log(e.key);
      to("/" + e.key);
    }
  };

  const location = useLocation();
  useEffect(() => {
    const arr = location.pathname.split("/");
    if (!arr[2] && items[0]) {
      setCurrent(items[0].key as KeyofXfunctions);
    } else {
      setCurrent(arr[2] as KeyofXfunctions);
    }
  }, [location]);

  return (
    <div className={styles.outer}>
      <div className={styles.menuContainer}>
        {/* <Button
          type="primary"
          shape="circle"
          icon={}
          onClick={() => {
            // to(-1);
            to("/");
          }}
        /> */}
        <div
          className={styles.back}
          onClick={() => {
            to("/");
          }}
        >
          <LeftOutlined />
        </div>
        {/* 
          mode={store.device === "computer" ? "vertical" : "horizontal"}
*/}
        <Menu
          className={styles.menu}
          onClick={onClick}
          selectedKeys={[current]}
          mode="horizontal"
          items={items}
        />
      </div>
      <div className={styles.rest}>
        {/* <div className={styles.topMargin}></div> */}
        <div>
          <Outlet />
        </div>
      </div>
      {/* <div className={styles.rest}>{xFunctions[current]}</div> */}
    </div>
  );
}
